<template>
  <div class="ek-form">
    <el-form :model="form" :rules="rules" label-width="160px" ref="forms" >
      <el-form-item label="Input"  prop="name" >
        <ekInput v-model="form.name" placeholder="测试" :clearable="true"/>
      </el-form-item>
      <el-form-item label="Select" prop="pwd">
        <ekSelect v-model="form.pwd" :autoInit="true" remoteUrl="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" />
      </el-form-item>
      <el-form-item label="Select2" prop="pwd">
        <ekSelect v-model="form.pwd" :autoInit="true" :options="[{value:1,label:'测试'},{value:0,label:'jiashu'}]"/>
      </el-form-item>
      <el-form-item label="Switch" prop="switch">
        <ekSwitch v-model="form.switch"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="Radio" prop="radio">
        <ekRadio v-model="form.radio"   remoteUrl="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" />
      </el-form-item>
      <el-form-item label="Radio2" prop="radio">
        <ekRadio v-model="form.radio"  :disabled="true" :options="[{value:1,label:'测试'},{value:0,label:'jiashu'}]" />
      </el-form-item>
      <el-form-item label="Checkbox" prop="checkbox">
        <ekCheckbox v-model="form.checkbox" remoteUrl="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" />
      </el-form-item>
      <el-form-item label="Checkbox2" prop="checkbox">
        <ekCheckbox v-model="form.checkbox" :options="[{value:1,label:'测试'},{value:0,label:'jiashu'}]" />
      </el-form-item>
      <el-form-item label="Datepicker" prop="datepicker">
        <ekDatePicker v-model="form.datepicker" />
      </el-form-item>
      <el-form-item label="textarea" prop="textarea">
        <ekTextarea v-model="form.textarea" />
      </el-form-item>      
    </el-form>
    <el-button @click="submit">测试</el-button>
  </div>
</template>

<script setup>
import {

  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  ref
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ekInput from "./ekInput/index.vue";
import ekSelect from "./ekSelect/index.vue";
import ekSwitch from "./ekSwitch/index.vue";
import ekRadio from "./ekRadio/index.vue";
import ekCheckbox from "./ekCheckbox/index.vue";
import ekDatePicker from "./ekDatePicker/index.vue";
import ekTextarea from "./ekTextarea/index.vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();

let form = reactive({
  name:'test',
  pwd:'1',
  switch:1,
  radio:'0',
  checkbox:['0','1'],
  datepicker:'',
  textarea:'',
})
let forms = ref(null)
let rules = reactive({
  name:[{ required: true, message: "请输入姓名", trigger: "blur" }],
  pwd:[{ required: true, message: "请输入密码", trigger: "blur" }],
  switch:[{ required: true, message: "请选择开关", trigger: "blur" }],
  radio:[{ required: true, message: "请选择单选框", trigger: "blur" }],
  checkbox:[{ required: true, message: "请选择复选框", trigger: "blur" }],
  datepicker:[{ required: true, message: "请选择日期", trigger: "blur" }],
  textarea:[{ required: true, message: "请输入内容", trigger: "blur" }],
})
const submit = () => {
  console.log(form,'props1')
  console.log(forms,'refForm')
  forms.value.validate().then(res => {
  });
  
}
</script>

<style scoped lang="scss">
.ek-form {
  .ek-input,.ek-select,.ek-date-picker,.ek-textarea {
    width: 220px;
  }
  .ek-select {
    :deep(.el-select) {
      width: 100%;
    }
  }
}
</style>
